<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue学习笔记</title>
    <!--引入vue-->
    <script src="../js/vue.js"></script>
</head>

<body>
    <div class="root">
        <!--使用插值表达式来动态渲染数据-->
        <h1>hello,{{name}} </h1>
        <h2>我的开发语言是 {{lang}}</h2>
        <!--vue动态绑定属性使用v-bind 或者简写：属性名-->
        <!-- <a v-bind:href="url">百度一下</a> 也可以简写:href -->
        <a :href="url">百度一下</a><br>
        <!--双向数据绑定 v-model -->
        <!-- 双向数据绑定 <input type="text" v-model:value="demo"> -->
        <!--v-model的简写-->
        双向数据绑定：<input type="text" v-model="demo">
    </div>
    <script>
        //创建vue实例
        const vue=new Vue({
            el: '.root', //绑定对应的vue实例对象和容器的关联关系
            data:{
                name:'vue',
                lang:'ts',
                url:"http://www.baidu.com",
                demo:'123456'
            }, //data存储数据，组件化后data是个函数
        })
    </script>
</body>
</html>